<template>
    <div ref="chart" style="width: 100%; height: 600px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts/core';
  import { ScatterChart } from 'echarts/charts';
  import { GeoComponent } from 'echarts/components';
  import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  import worldMap from './world.json'
  export default {
    mounted() {
        echarts.registerMap('world', { geoJSON: worldMap })
      // 注册必须的组件
      echarts.use([TitleComponent, TooltipComponent, LegendComponent, GeoComponent, ScatterChart, CanvasRenderer]);
  
      
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);
  
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '全球各个城市空气质量排名',
          subtext: '数据来自http://aqicn.org/',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          y: 'bottom',
          x: 'right',
          data: ['空气质量']
        },
        visualMap: {
          min: 0,
          max: 300,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          },
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: 'world',
          roam: true,
          silent: true,
          itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111'
          }
        },
        series: [
          {
            name: '空气质量',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
              { name: '北京', value: [116.46, 39.92, 200], label: { show: true } },
              { name: '上海', value: [121.48, 31.22, 100] },
              { name: '广州', value: [113.27, 23.13, 150] },
              { name: '深圳', value: [114.07, 22.62, 80] },
              { name: '纽约', value: [-73.94, 40.67, 250] },
              { name: '伦敦', value: [-0.13, 51.53, 50] },
              { name: '东京', value: [139.69, 35.69, 120] },
              { name: '巴黎', value: [2.35, 48.86, 90] }
            ],
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            itemStyle: {
              color: 'red'
            }
          }
        ]
      };
  
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  };
  </script>
  
  <style>
    /* 可选的样式 */
  </style>
  